import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import styles from './zhibo.module.css';

const ZhiBoHome = () => {
  const navigate = useNavigate();
  const [selectedRole, setSelectedRole] = useState(null);
  
  // 返回首页函数
  const goToHome = () => {
    navigate('/');
  };

  return (
    <div className={styles.app}>
      {/* 头部导航 */}
      <div className={styles.chatHeader}>
        <button 
          className={styles.backButton}
          onClick={goToHome}
          title="返回首页"
        >
          ← 返回
        </button>
        <div className={styles.headerInfo}>
          <h1 className={styles.chatTitle}>WebRTC直播系统</h1>
          <p className={styles.roomInfo}>🎥 长风破浪会有时，直挂云帆济沧海。</p>
        </div>
      </div>
      
      {/* 角色选择区域 */}
      <div className={styles.roleSelector}>
        <button 
          className={`${styles.roleButton} ${selectedRole === 'teacher' ? styles.active : ''}`}
          onClick={() => setSelectedRole('teacher')}
        >
          教师
        </button>
        <button 
          className={`${styles.roleButton} ${selectedRole === 'student' ? styles.active : ''}`}
          onClick={() => setSelectedRole('student')}
        >
          学生
        </button>
      </div>
      
      {/* 主要内容区域 */}
      <div className={styles.mainContent}>
        {/* 模式选择器 */}
        {selectedRole && (
          <div className={styles.modeSelector}>
            {selectedRole === 'teacher' && (
              <div className={styles.modeCard}>
                <div className={styles.modeIcon}>📺</div>
                <h2>发起直播</h2>
                <p>分享您的屏幕给观众</p>
                <div className={styles.featureList}>
                  <span className={styles.feature}>✓ 屏幕共享</span>
                  <span className={styles.feature}>✓ 音频传输</span>
                  <span className={styles.feature}>✓ 麦克风支持</span>
                </div>
                <Link to="/zhibo-streamer" className={styles.modeButton}>
                  开始直播
                </Link>
              </div>
            )}
            
            {selectedRole === 'student' && (
              <div className={styles.modeCard}>
                <div className={styles.modeIcon}>👀</div>
                <h2>观看直播</h2>
                <p>观看其他人的直播内容</p>
                <div className={styles.featureList}>
                  <span className={styles.feature}>✓ 高质量视频</span>
                  <span className={styles.feature}>✓ 音频控制</span>
                  <span className={styles.feature}>✓ 低延迟</span>
                </div>
                <Link to="/zhibo-viewer" className={styles.modeButton}>
                  观看直播
                </Link>
              </div>
            )}
          </div>
        )}
        
        {/* 功能特色区域 */}
        <div className={styles.features}>
          <h3>✨ 功能特色</h3>
          <ul>
            <li>🔄 实时 P2P 连接，低延迟传输</li>
            <li>🖥️ 高质量屏幕共享</li>
            <li>🔊 全新音频支持，包括系统声音和麦克风</li>
            <li>🎚️ 音量控制和静音选项</li>
            <li>🏠 固定房间 live-room-001</li>
            <li>📱 响应式设计，支持多设备</li>
            <li>🔒 安全的 WebRTC 连接</li>
          </ul>
        </div>
        
        {/* 音频使用提示 */}
        <div className={styles.audioTips}>
          <h3>🎵 音频使用提示</h3>
          <p>1. <strong>主播端</strong>: 直播时系统会请求麦克风权限，如需分享系统声音请在屏幕共享选项中勾选"分享音频"</p>
          <p>2. <strong>观众端</strong>: 可使用音量按钮或按键盘"M"键切换静音状态</p>
          <p>3. <strong>问题排查</strong>: 如果听不到声音，请检查浏览器音量设置或点击视频画面激活音频播放</p>
        </div>
      </div>
    </div>
  );
};

export default ZhiBoHome;